@mixin dropzone {
  background-color: inherit;
  border: none;
  height: 79vh;
  padding: 0;
  position: relative;

  &.dz-clickable * {
    cursor: initial;
  }

  & div.dropzone-ghost {
    display: none;
    opacity: .75;
  }

  &.dz-drag-hover {
    border: none;
    &:after {
      bottom: 0;
      content: "";
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }

    div.dropzone-ghost {
      display: block;
    }
  }

  .dz-preview {
    &.dz-image-preview {
      background: none;
    }
    .dz-progress {
      border: 0;
      border-radius: 0;
      bottom: 163px;
      height: 4px;
      top: auto;
      left: 0;
      width: 100%;
      margin: 0;
      opacity: 1 !important;
      transition: height $transition-duration !important;

      .dz-upload {
        background: map-get($blue, base);
      }
    }

    &.dz-complete {
      .dz-progress {
        height: 0;
      }
    }
  }

  &-message {
    span {
      font-size: 1.7rem;
      text-transform: uppercase;
    }
  }

  .dz-message {
    position: absolute;
    left: 0;
    margin: 0;
    right: 0;
    top: 0;
  }
}

.dropzone {
  @include dropzone;
}
